<template>
  <view class="tn-flex tn-padding-left tn-padding-right">
    <view>
      <text v-for="(tab,idx) in list" :class="tabIndex==idx?'tab-active':''" class="tn-margin-right" style="padding-bottom: 5px" @click="changeTab(idx)">{{ tab.name }}</text>
    </view>
  </view>
</template>

<script>

export default {
  name: "tab",
  props: {
    list:{
      type:Array,
      default:[]
    },
    tabIndex:{
      type:Number,
      default:0
    },
  },
  data() {
    return {
    }
  },
  methods: {
    changeTab(idx) {
      this.$emit('change', idx)
    },
  }
}
</script>


<style scoped lang="scss">
.tab-active {
  font-weight: bold;
  color: #FF3D71;
  font-size: larger;
  border-bottom: 2px solid;
}

</style>
